<script setup lang="ts">
// import { useRouter } from 'vue-router'
import { reactive, h, onMounted } from 'vue'
import { FolderOutlined } from '@ant-design/icons-vue'
import { message } from 'ant-design-vue'

// const router = useRouter()

interface FormState {
  outputPath: string
  equalSource: boolean
}

const formState = reactive<FormState>({
  outputPath: '',
  equalSource: false
})

onMounted(async () => {
  console.log(`the component is now mounted.`)
  const outputManageValue = await window.api.getStoreValue('outputManage')
  const { equalSource, outputPath } = outputManageValue
  formState.equalSource = equalSource
  formState.outputPath = outputPath
  console.log('v', outputManageValue)
})

/** 保存 */
const onFinish = async (values) => {
  console.log('Success:', values)
  window.api.setStoreValue('outputManage', values)
  // message.success('保存成功', 2).then(() => back())
  message.success('保存成功', 2)
}

const onFinishFailed = (errorInfo) => {
  console.log('Failed:', errorInfo)
}
/** 选择路径 */
const handleChoose = async () => {
  const res = await window.api.chooseOpenDirectory()
  console.log('res', res)
  const { filePaths } = res
  if (filePaths.length > 0) {
    formState.outputPath = filePaths[0]
  }
}
/** 返回 */
// function back() {
//   router.replace('/')
// }
</script>
<template>
  <!-- <a-page-header class="page-header" title="输出路径" @back="back" /> -->
  <div class="container">
    <a-form
      :model="formState"
      name="basic"
      autocomplete="off"
      layout="vertical"
      @finish="onFinish"
      @finishFailed="onFinishFailed"
    >
      <a-form-item
        label="输出路径"
        name="outputPath"
        :rules="[{ required: false, message: '请选择输出路径!' }]"
      >
        <div class="flex-item">
          <a-input v-model:value="formState.outputPath" disabled style="width: 300px" />
          <a-form-item>
            <a-button :icon="h(FolderOutlined)" style="margin-left: 10px" @click="handleChoose"
              >更改</a-button
            >
          </a-form-item>
        </div>
      </a-form-item>

      <a-form-item
        name="equalSource"
        help="如果打开此选项，则会忽略手动选择的输出路径，直接输出到源文件目录"
      >
        <a-checkbox v-model:checked="formState.equalSource">输出至源文件目录</a-checkbox>
      </a-form-item>

      <a-form-item style="text-align: center">
        <a-button type="primary" html-type="submit">保存</a-button>
      </a-form-item>
    </a-form>
  </div>
</template>

<style lang="less" scoped>
.container {
  padding: 24px 0;
}
.flex-item {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  > .ant-form-item {
    margin-bottom: 0;
  }
}
</style>
